<template>
    <client-only>
      <div class="main">
        <div class="title">
          <a href="/login">登录</a>
          <span>·</span>
          <a class="active" href="/register">注册</a>
        </div>
    
        <div class="sign-up-container">
          <el-form :model="user" :rules="rules" ref="userForm">
            <el-form-item class="input-prepend restyle" prop="nickname">
              <div>
                <el-input
                  type="text"
                  placeholder="你的昵称"
                  v-model="user.nickname"
                />
                <i class="iconfont icon-user" />
              </div>
            </el-form-item>
    
            <el-form-item class="input-prepend restyle no-radius" prop="mobile">
              <div>
                <el-input type="text" placeholder="手机号" v-model="user.mobile" />
                <i class="iconfont icon-phone" />
              </div>
            </el-form-item>
    
            <el-form-item class="input-prepend restyle no-radius" prop="code">
              <div
                style="width: 100%; display: block; float: left; position: relative"
              >
                <el-input type="text" placeholder="验证码" v-model="user.code" />
                <i class="iconfont icon-phone" />
              </div>
              <div
                class="btn"
                style="position: absolute; right: 0; top: 6px; width: 40%"
              >
                <a
                  href="javascript:"
                  type="button"
                  style="border: none; background-color: none"
                  @click="sendCode"
                  >{{codeTest}}</a
                >
              </div>
            </el-form-item>
    
            <el-form-item class="input-prepend" prop="password">
              <div>
                <el-input
                  type="password"
                  placeholder="设置密码"
                  v-model="user.password"
                />
                <i class="iconfont icon-password" />
              </div>
            </el-form-item>
    
            <div class="btn">
              <input type="button" class="sign-up-button" @click="submitForm" value="注册" />
            </div>
            <p class="sign-up-msg">
              点击 “注册” 即表示您同意并愿意遵守简书
              <br />
              <a target="_blank" href="#">用户协议</a>
              和
              <a target="_blank" href="#">隐私政策</a> 。
            </p>
          </el-form>
          <!-- 更多注册方式 -->
          <div class="more-sign">
            <h6>社交帐号直接注册</h6>
            <ul>
              <li>
                <a id="weixin" class="weixin" target="_blank" href="javascript:;"
                  ><i class="iconfont icon-weixin"
                /></a>
              </li>
              <li>
                <a id="qq" class="qq" target="_blank" href="javascript:;"
                  ><i class="iconfont icon-qq"
                /></a>
              </li>
            </ul>
          </div>
        </div>
      </div>
      </client-only>
    </template>
    
    <script>
    import "~/assets/css/sign.css";
    import "~/assets/css/iconfont.css";
    import memberApi from '/api/member'
    export default {
      layout: "sign",
      data() {
        var   validateMobile = (rule, value, callback)=>{
              if (/^1[3456789]\d{9}/.test(value)){
                // 验证通过
                callback()
              }else{
                callback(new Error('手机号码格式不正确'));
              }
          }
        return {
          user: {
            mobile: "", //手机号
            password: "", //密码
            nickname: "", //昵称
            code: "", //验证码
          },
          codeTest:'获取验证码',
          second:10,//发送验证码秒数
          allowSend:true,//是否允许发送验证码
          // 表单验证规则
          // Form 组件提供了表单验证的功能，只需要通过 rules 属性传入约定的验证规则，并将 Form-Item 的 prop 属性设置为需校验的字段名即可。
          rules: {
            mobile: [
              { required: true, message: "请输入手机号", trigger: "blur" },
               { validator:validateMobile, trigger: 'blur' }
            ],
            password: [
              { required: true, message: "请输入密码", trigger: "blur" },
            ],
            nickname: [{ required: true, message: "请输入昵称", trigger: "blur" }],
            code: [
              { required: true, message: "请输入验证码", trigger: "blur" },
            ],
          },
        };
      },
      methods:{
        // 提交注册表单
        submitForm(){
          // 对表单内容进行校验
          // 进行数据的合法性校验
          this.$refs["userForm"].validate((valid) => {
            if (valid) {
              // 格式校验通过，提交注册表单
              memberApi.register(this.user).then(res=>{
                // 提示注册成功
                 this.$message({
                  type:'success',
                  message:'注册成功'
                })
                // 跳转至登录页面
                this.$router.push('/login')
              })
              
              
            }else {
              // 格式校验失败
              console.log("error submit!!");
              return false;
            }
          });
        },
        // 倒计时效果
        timeDown(){
          let timeId = setInterval(()=>{
            this.second--
            this.codeTest=`${this.second}秒后重试`
            if (this.second<=0) {
              this.codeTest='获取验证码'
    
              // 清除定时器
              clearInterval(timeId)
    
              // 重置倒计时秒数
              this.second=10
    
              // 重置发送验证码条件
              this.allowSend=true
            }
          },1000)
        },
        // 发送验证
        sendCode(){ 
          if (!this.allowSend) {
            return
          }
          // 验证表单中的手机号是否合法
          this.$refs["userForm"].validateField('mobile',(errMsg)=>{
            if (errMsg==='') {
              // 启用倒计时
              this.timeDown()
    
              // 将发送条件置为false，避免恶意用户频繁点击
                this.allowSend=false  
    
    
              // 调用发送短信验证码API
              console.log('1');
              memberApi.sendSMS(this.user.mobile).then(res=>{
                // 发送成功提示用户
                this.$message({
                  type:'success',
                  message:'验证码发送成功,十分钟内有效'
                })
              })
              
            }
          })
        },
          
      }
    };
    </script>